<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记录增删</title>
		
		<style type="text/css">
			#total {
				width: 450px;
				margin-left: auto;
				margin-right: auto;
			}
			
			ul {
				list-style-type: none;
			}
			
			li {
				border-style: solid;
				border-width: 1px;
				padding: 5px;
				margin: 5px;
				background-color: white;
				float: left;
			}
			
			.inner {
				width: 400px;
				border-style: solid;
				border-width: 1px;
				margin: 10px;
				padding: 10px;
				float: left;
			}
			
			#employeeTable {
				border-spacing: 1px;
				background-color: black;
				margin: 80px auto 10px auto;
			}
			
			th,td {
				background-color: white;
			}
			
			#formDiv {
				width: 250px;
				border-style: solid;
				border-width: 1px;
				margin: 50px auto 10px auto;
				padding: 10px;
			}
			
			#formDiv input {
				width: 100%;
			}
			
			.word {
				width: 40px;
			}
			
			.inp {
				width: 200px;
			}
		</style>
		
		<script type="text/javascript">
		window.onload = function(){
			
			//删除tr的函数
			function delA(){
				var tr = this.parentNode.parentNode;
				
				//获取员工姓名 tr.childen[0].innerText;
				var name = tr.getElementsByTagName("td")[0].innerText;
				
				//删除之前弹出提示框
				if(confirm("确定删除"+name+"?")){
					//获取父元素删除该tr
					tr.parentNode.removeChild(tr);
				}
				
				
				return false;
			}
			//获取所有的a
			var allA = document.getElementsByTagName("a");
			for(var i =0 ;i<allA.length;i++){
				allA[i].onclick = delA;
					
			}
			
			
			
			//添加员工的功能
			var addEmpBtn = document.getElementById("addEmpButton");
			addEmpBtn.onclick = function(){
				var name = document.getElementById("empName").value;
				var email = document.getElementById("email").value;
				var salary = document.getElementById("salary").value;
				
				var tr = document.createElement("tr");
				//将获取的信息保存到tr里
				tr.innerHTML+="<td>"+name+"</td>"+
				              "<td>"+email+"</td>"+
							  "<td>"+salary+"</td>"+
							  "<td><a href='javascript:;'>Delete</a></td>";
		        
				var employeeTable = document.getElementById("employeeTable");
				var tbody = employeeTable.getElementsByTagName("tbody")[0];
				tbody.appendChild(tr);
				//获取刚添加的a元素 绑定删除tr的相应函数
				var a = tr.getElementsByTagName("a")[0];
				a.onclick = delA;

				
			};
			
		}
		   
		</script>
		
		
	</head>
	<body>
		<body>
		
			<table id="employeeTable">
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				<tr>
					<td>Jerry</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</table>
		
			<div id="formDiv">
			
				<h4>添加新员工</h4>
		
				<table >
					<tr>
						<td class="word">name: </td>
						<td class="inp">
							<input type="text" name="empName" id="empName" />
						</td>
					</tr>
					<tr>
						<td class="word">email: </td>
						<td class="inp">
							<input type="text" name="email" id="email" />
						</td>
					</tr>
					<tr>
						<td class="word">salary: </td>
						<td class="inp">
							<input type="text" name="salary" id="salary" />
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<button id="addEmpButton" value="abc">
								Submit
							</button>
						</td>
					</tr>
				</table>
		
			</div>
		
		</body>
	</body>
</html>
